import React from "react";
import {
  Form,
  Table,
  Icon,
  Tag,
  Modal,
  Steps,
  Button,
  message,
  Input,
  Row,
  Col,
  Select,
  DatePicker,
  InputNumber,
  Dropdown,
  Menu,
  Badge
} from "antd";
import { DropOption } from "components";
import moment from "moment";
import { formatDate } from "utils";
const Step = Steps.Step;
const confirm = Modal.confirm;
const FormItem = Form.Item;
const Option = Select.Option;

class ModalSelect extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      current: 0,
      value: "",
      bottons: "查看"
    };
  }
  showReturn() {
    const { showList, onComponent } = this.props;
    showList();
    onComponent();
  }
  show(value) {
    const { showList, info, onEdit, onComponent } = this.props;
    //		showList()
    const { validateFields, getFieldsValue } = this.props.form;
    const params = getFieldsValue();
    params.returnState = value;
    params.id = info.document.borrowReturn.id;
    if (params.returnAuditOpinion == undefined) {
      params.returnAuditOpinion = "";
    }
    (params.type = 1), (params.documentId = info.document.id);
    onEdit(params);
    onComponent();
  }
  bottonClick(i) {
    //	console.log(this.state.bottons)
    if (document.getElementById(i).style.display != "block") {
      document.getElementById(i).style.display = "block";
    } else {
      document.getElementById(i).style.display = "none";
    }
    if (this.state.bottons == "查看") {
      this.setState({ bottons: "隐藏" });
    } else {
      this.setState({ bottons: "查看" });
    }
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 16 }
    };
    const { info } = this.props;
    var list = [];
    var photoPage = [];
    var applyList = [];
    if (info != undefined || info != "") {
      if (!info) {
        return null;
      }
      list.push(
        <li style={{ width: "50%", lineHeight: "40px" }}>
          {"档案年度"}:{info.document.documentYear}
        </li>
      );
      list.push(
        <li style={{ width: "50%", lineHeight: "40px" }}>
          {"公证事项"}:{info.document.notarialMatters}
        </li>
      );
      list.push(
        <li style={{ width: "50%", lineHeight: "40px" }}>
          {"申请人"}:{info.document.applyName}
        </li>
      );
      list.push(
        <li style={{ width: "50%", lineHeight: "40px" }}>
          {"建档时间"}:{moment(info.document.createTime).format(
            "YYYY-MM-DD HH:mm:ss"
          )}
        </li>
      );
      list.push(
        <li style={{ width: "50%", lineHeight: "40px" }}>
          {"公证日期"}:{moment(info.document.notarizationAt).format(
            "YYYY-MM-DD HH:mm:ss"
          )}
        </li>
      );
      list.push(
        <li style={{ width: "50%", lineHeight: "40px" }}>
          {"保管期限"}:{info.document.storageLife}
        </li>
      );
      list.push(
        <li style={{ width: "50%", lineHeight: "40px" }}>
          {"档案页数"}:{info.document.pageNumber}
        </li>
      );
      list.push(
        <li style={{ width: "50%", lineHeight: "40px" }}>
          {"承办人"}:{info.document.contractorUserName}
        </li>
      );
      list.push(
        <li style={{ width: "50%", lineHeight: "40px" }}>
          {"建档人"}:{info.document.createUserName}
        </li>
      );
      list.push(
        <li style={{ width: "50%", lineHeight: "40px" }}>
          {"公证号"}:{info.document.notaryNumber}
        </li>
      );
      list.push(
        <li style={{ width: "50%", lineHeight: "40px" }}>
          {"档案备注"}:{info.document.remarks}
        </li>
      );

      if (info.document.borrowReturn != undefined) {
        applyList.push(
          <li style={{ width: "50%", lineHeight: "40px" }}>
            {"借阅时间"}:{formatDate(info.document.borrowReturn.borrowStartAt)}至{formatDate(
              info.document.borrowReturn.borrowEndAt
            )}
          </li>
        );
        applyList.push(
          <li style={{ width: "50%", lineHeight: "40px" }}>
            {"归还时间"}:{moment(info.document.borrowReturn.returnAt).format(
              "YYYY-MM-DD HH:mm:ss"
            )}
          </li>
        );
        applyList.push(
          <li style={{ width: "50%", lineHeight: "40px" }}>
            {"借阅人"}:{info.document.borrowReturn.borrowUserName == ""
              ? "暂无"
              : info.document.borrowReturn.borrowUserName}
          </li>
        );
        applyList.push(
          <li style={{ width: "50%", lineHeight: "40px" }}>
            {"归还人"}:{info.document.borrowReturn.returnUserName == ""
              ? "暂无"
              : info.document.borrowReturn.returnUserName}
          </li>
        );
        applyList.push(
          <li style={{ width: "50%", lineHeight: "40px" }}>
            {"联系方式"}:{info.document.borrowReturn.contactWay == ""
              ? "暂无"
              : info.document.borrowReturn.contactWay}
          </li>
        );
        applyList.push(
          <li style={{ width: "50%", lineHeight: "40px" }}>
            {"借阅申请原因"}:{info.document.borrowReturn.borrowReason == ""
              ? "暂无"
              : info.document.borrowReturn.borrowReason}
          </li>
        );
      }
      //			var menu = JSON.parse(info.document.basicInfo)
      var pages = info.document.documentBillList;
      //			for(let i=0;i<menu.length;i++){
      //				list.push(<li key={i} style={{width:"33.3%",lineHeight:"40px"}}>{menu[i].name}:{menu[i].value}</li>)
      //			}
      for (let i = 0; i < pages.length; i++) {
        photoPage.push(
          <div>
            <div
              style={{
                display: "flex",
                justifyContent: "space-between",
                margin: "10px 20px",
                background: "#f4f4f4",
                lineHeight: "50px",
                borderRadius: 5
              }}
            >
              <span style={{ marginLeft: 10, fontWeight: 600 }}>
                {i + 1}.{pages[i].name} [{pages[i].billfileList.length}条]
              </span>
              <div style={{ marginRight: 10 }}>
                <Button
                  type="primary"
                  onClick={this.bottonClick.bind(this, i)}
                  style={{
                    border: "1px solid #DDDDDD",
                    marginRight: 10,
                    color: "black",
                    backgroundImage:
                      "linear-gradient(180deg,#fdfdfd 0%,#dddddd 98%)"
                  }}
                >
                  查看
                </Button>
              </div>
            </div>
            <div
              id={i}
              style={{
                overflow: "scroll",
                height: "200px",
                margin: "0 40px",
                display: "none"
              }}
            >
              <div className="clearfix">
                {pages[i].billfileList.map((item, i) => {
                  return (
                    <img
                      src={
                        "http://file.sip.feelbang.com/files/" +
                        item.url +
                        "?token=" +
                        sessionStorage.getItem("token")
                      }
                      style={{ width: 80, margin: 5 }}
                    />
                  );
                })}
              </div>
            </div>
          </div>
        );
      }
    }
    var Opinion = [];

    Opinion.push(
      <div>
        <span style={{ fontSize: 20, marginLeft: 20, fontWeight: 600 }}>
          填写审核意见:
        </span>
        <FormItem label="审核意见" {...formItemLayout}>
          {getFieldDecorator("returnAuditOpinion", {
            rules: [{ required: false, message: "不能为空" }]
          })(<Input placeholder="请输入" type="textarea" rows={4} />)}
        </FormItem>
        <div style={{ textAlign: "center" }}>
          <Button
            style={{ width: 100, marginTop: 20, height: 30, marginRight: 20 }}
            type="primary"
            onClick={this.show.bind(this, 1)}
          >
            同意
          </Button>
          <Button
            style={{ width: 100, marginTop: 20, height: 30 }}
            type="primary"
            onClick={this.show.bind(this, 2)}
          >
            驳回
          </Button>
        </div>
      </div>
    );
    return (
      <div>
        <div style={{ marginBootm: 30 }}>
          <span style={{ fontSize: 20, marginLeft: 20, fontWeight: 600 }}>
            文档信息:
          </span>
          <br />
          <ul
            style={{
              display: "flex",
              flexWrap: "wrap",
              margin: "0 10px",
              marginLeft: 40
            }}
          >
            {list}
          </ul>
        </div>
        <div className="listLib">
          <span style={{ fontSize: 20, marginLeft: 20, fontWeight: 600 }}>
            资料清单:
          </span>
          <div>{photoPage}</div>
        </div>
        <div style={{ marginBootm: 30 }}>
          <span style={{ fontSize: 20, marginLeft: 20, fontWeight: 600 }}>
            审核信息:
          </span>
          <br />
          <ul
            style={{
              display: "flex",
              flexWrap: "wrap",
              margin: "0 10px",
              marginLeft: 40,
              width: "50%"
            }}
          >
            {applyList}
          </ul>
        </div>
        <div style={{ width: "50%" }}>{Opinion}</div>
        <Button
          style={{ width: 200, marginTop: 30, height: 40 }}
          type="primary"
          onClick={this.showReturn.bind(this)}
        >
          返回
        </Button>
      </div>
    );
  }
}

export default Form.create()(ModalSelect);
